<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar
    title="黑马头条-登录"
    :fixed='true'
    :placeholder='true'
     />
    <!-- 表单 -->
    <van-form @submit="onSubmit">
  <van-field
    v-model="form.mobile"
    label="手机号"
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号',pattern:/^[1]([3-9])\d{9}$/ }]"
    required
  />
  <van-field
    v-model="form.code"
    type="password"
    label="验证码"
    placeholder="验证码"
    :rules="[{ required: true, message: '请填写验证码',pattern:/^\d{6}$/,trigger:'onChange' }]"
    required
  />
  <div style="margin: 16px;">
    <van-button round block type="info" :disabled = 'isLogin' native-type="submit" loading-text="正在登录..." :loading = 'isLogin' >登录</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
// 实现任何需求:
// 1．铺设页面(html+css)
// 2．铺设数据(修改数据)
// 3．交互功能
// 4。调用后台接口
// 目标:登录页面-路由
// 1. views/Login/index.vue -给框
// 2．配置到router/index.js里
// 3.App.vue - router-view挂载剌

// ·目标:头部导航
// 1.明确需求,复制组件过来，剔除无用的
// 2.·再修改，改标题内容，改背景颜色，字体颜色
// 3.·查文档->-定制样式
// 4.· babel.config.js里配置
// 5.vue.config.js里配置cover.less文件的绝对地址

// 目标:登录表单-铺设-校验
// 1．找到表单van-form整体复制过来
// 2．查看属性意思,相应修改
// 3．寻找红色前星星,required属性
// 4. v-model绑定form对象属性和输入框值
// 5.field-里rules设置校验规则

// 目标:登录功能-拿到数据
// vant组件不同于element-ui, vant组件的van-form遇到提交时,会自己检验每个表单里的规则，不通过，就不执行submit事件的方法
// 可以用this.form/ values都是参数名和值
// 目标:登录接口调用
// 1.api里,看接口,编写接口方法
// 2．在Login/index. vue中,引入,在submit函数中使用,传入收集到的form对象里参数名和值Ⅰ
// 3．之后，拿到token.js工具，直接把token存入本地(不用存vuex里)
// 4.Notify通知，给用户反馈，vant组件(有的可以用函数形式调用，有的也可以用组件形式来调用，具体要看文档)

// 目标:(优化)防止用户频繁点击按钮
// 1．按钮身上，禁用属性，网络请求开始，开启禁用，请求成功/失败，关闭禁用
// 2．同时，加载状态提示用户 loading,loading-text

import { LoginAPI } from '@/api'
import { setToken } from '@/utils/token'
// import { Notify } from 'vant'
export default {
  data () {
    return {
      form: {
        mobile: '15318188665',
        code: '246810'
      },
      isLogin: false
    }
  },
  methods: {
    async  onSubmit (values) {
      this.isLogin = true
      // console.log('submit', values)
      try {
        const res = await LoginAPI({
          ...this.form
        })
        // console.log(res)
        setToken(res.data.data.token)
        localStorage.setItem('refresh_token', res.data.data.refresh_token)
        this.isLogin = false
        this.$notify({ type: 'success', message: '登录成功' })
        this.$router.push({
          path: this.$route.query.pa || '/layout'
        })
      } catch (err) {
        console.error(err)
        this.$notify({ type: 'danger', message: '手机或验证码错误' })
        this.isLogin = false
      }
    }
  }
}
</script>

<style>
</style>
